<template>
	<Layout :class="prefixCls" v-bind="lockEvents">
		<LayoutFeatures />
		<LayoutHeader fixed v-if="getShowFullHeaderRef" />
		<Layout :class="[layoutClass]">
			<LayoutSideBar />
			<Layout :class="`${prefixCls}-main`">
				<LayoutMultipleHeader />
				<LayoutContent />
				<LayoutFooter />
			</Layout>
		</Layout>
	</Layout>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { Layout } from 'ant-design-vue';
import { createAsyncComponent } from '@/utils/createAsyncComponent';

import LayoutHeader from './header/index.vue';
import LayoutContent from './content/index.vue';
import LayoutSideBar from './sider/index.vue';
import LayoutMultipleHeader from './header/MultipleHeader.vue';

import { useDesign } from '@/hooks/web/useDesign';
import { useLockPage } from '@/hooks/web/useLockPage';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';

export default defineComponent({
	name: 'DefaultLayout',
	components: {
		LayoutFeatures: createAsyncComponent(() => import('@/layouts/default/feature/index.vue')),
		LayoutFooter: createAsyncComponent(() => import('@/layouts/default/footer/index.vue')),
		LayoutHeader,
		LayoutContent,
		LayoutSideBar,
		LayoutMultipleHeader,
		Layout,
	},
	setup() {
		const { prefixCls } = useDesign('default-layout');
		const { getShowFullHeaderRef } = useHeaderSetting();

		// Create a lock screen monitor
		const lockEvents = useLockPage();

		const layoutClass = computed(() => {
			let cls: string[] = ['ant-layout'];

			return cls;
		});

		return {
			prefixCls,
			layoutClass,
			lockEvents,
			getShowFullHeaderRef
		};
	},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-default-layout';

.@{prefix-cls} {
	display: flex;
	width: 100%;
	min-height: 100%;
	background-color: @content-bg;
	flex-direction: column;

	> .ant-layout {
		min-height: 100%;
	}

	&-main {
		width: 100%;
		margin-left: 1px;
	}
}
</style>
